<template>
  <div class="banner-panel">
  	<div class="content-panel" v-if="!userName || change">
  		<div class="panel-wrap pull-right login-panel">
			  <p class="login-title">{{ $root.lang.login.title }}</p>
				<el-form>
					<el-form-item>
						<el-radio-group v-model="form.accountType" @change="accountTypeChange">
							<el-radio :label="item.value" :key="index" :value="item.value" v-for="(item, index) in baseState.accountType" >{{ item.title}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			  <p class="login-error">{{ errmsg }}</p>
  			<el-form class="login-form" ref="form" :model="form" label-width="0px">
				  <el-form-item>
				    <el-input type="text" v-model="form.userName" :placeholder="userNameMsg" prefix-icon="fa fa-user-o"></el-input>
				  </el-form-item>
				  <el-form-item class="no-bottom">
				    <el-input type="password" v-model="form.password" :placeholder="$root.lang.login.password" @keyup.enter.native="onSubmit" prefix-icon="fa fa-lock"></el-input>
				  </el-form-item>
					<el-form-item prop="captcha" class="form-captcha" align="left">
						<el-input type="text" v-model="form.code" :placeholder="$root.lang.login.captcha"></el-input>
						<img class="pull-right" ref="captcha" @click="getCaptchaCode()" :src="img" :title="$root.lang.login.captchaTip"/>
					</el-form-item>
				  <el-form-item class="control">
				    <el-checkbox v-model="remember">{{ $root.lang.login.remember }}</el-checkbox>
				    <a type="text" class="to-forgot pull-right" href="/forgot">{{ $root.lang.login.forgot }}</a>
				  </el-form-item>
				  <el-form-item>
				    <el-button class="login-btn" type="primary" :loading="loading" @click="onSubmit">{{ $root.lang.login.btn }}</el-button>
				  </el-form-item>
				</el-form>
  		</div>
  	</div>
    <div class="content-panel" v-if="userName && !change">
      <div class="panel-wrap pull-right login-panel has-login">
        <p class="login-account">{{ userName }}</p>
        <el-button class="portal-btn" type="primary" @click="toControl">{{ $root.lang.login.control }}</el-button>
        <el-button type="text" class="change-btn" @click="changeAccount">{{ $root.lang.login.switch }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken, setToken, removeToken } from '@/utils/auth'
import '@/options/baseState'
export default {
  data() {
    return {
      userName: '',
			userNameMsg: this.$root.lang.login.userNamePersonal,
      change: false,
			img: '',
      form: {
        userName: '',
        password: '',
				code: '',
				uuid: '',
				accountType: 1,
      },
      remember: false,
      errmsg: '',
      loading: false,
			baseState: {},
    }
  },
  created() {
		this.checkLang()
    this.userName = this.Cookies.get('U')
  	if(this.Cookies.get('R')) {
  		this.remember = true
  		this.form.userName = this.Cookies.get('R')
  	}
		this.getCaptchaCode()
  },
  methods: {
    toControl() {
			let auditStatus = this.Cookies.get('S')
			// 个人用户
			if(auditStatus == 'null') {
				window.location.href = '/control/dashboard'
			} else {
				// 企业用户
				// 未审核
				if (auditStatus != '1') {
					window.location.href = '/control/user'
				} else {
					window.location.href = '/control/dashboard'
				}
			}
    },
    changeAccount() {
      this.change = true
    },
  	onSubmit() {
  		this.errmsg = ''
  		var flag = true
  		for(var key in this.form) {
  			var item = this.form[key]
  			if(!item) {
  				this.errmsg = this.$root.lang.login.loginRule[key]
  				flag = false
  				break
  			}
  		}
  		if(flag) {
  			this.doLogin()
  		}
  	},
  	doLogin() {
  		this.loading = true
      this.request({
        url: '/system/login',
        method: 'post',
        data: this.form
      }).then(response => {
        this.loading = false
      	if(this.remember) this.Cookies.set('R', this.form.userName)
      	else this.Cookies.remove('R')
        this.Cookies.set('U', this.form.userName)
				this.Cookies.set('I', response.result.user_id)
        this.$store.commit('SET_STATUS', response.result.access_token)
        this.$store.commit('SET_TIME', new Date().getTime() + response.result.expires_in * 60 * 1000)
				this.getUserVisual()
      }).catch(error => {
        this.loading = false
        this.errmsg = error.errmsg
				this.getCaptchaCode()
      })
  	},
    getCaptchaCode() {
      this.request({
        url: '/code',
        method: 'get',
      }).then(response => {
          var result = response.result
          this.img = 'data:image/jpeg;base64,' + result.img
          this.form.uuid = result.uuid
      }).catch(error => {
      })
    },
		accountTypeChange() {
      if(this.form.accountType == 1) {
				this.userNameMsg = this.$root.lang.login.userNamePersonal
      } else {
				this.userNameMsg = this.$root.lang.login.userNameEnterprise
      }
    },
		getUserInfo() {
			this.request({
        url: '/system/user/info/' + this.Cookies.get('I'),
        method: 'get',
      }).then(response => {
					this.Cookies.set('T', response.result.accountType)
					this.Cookies.set('S', response.result.auditStatus)
					this.Cookies.set('O', response.result.isOpen)
					window.location.href = '/home'
      }).catch(error => {
      })
		},
		getUserVisual() {
      this.request({
        url: '/web/stock/application/query',
        method: 'get',
      }).then(response => {
        this.Cookies.set('V', response.result)
				this.getUserBlock()
				// this.getUserInfo()
      }).catch(error => {
      })
    },
		getUserBlock() {
      this.request({
        url: '/blockchain/stock/user/query',
        method: 'get',
      }).then(response => {
        this.Cookies.set('B', response.result.examineState)
				this.getUserLog()
      }).catch(error => {
        this.Cookies.set('B', null)
				this.getUserLog()
      })
    },
		getUserLog() {
      this.request({
        url: '/daliy/state',
        method: 'get',
      }).then(response => {
				if(response.result == null) {
					this.Cookies.set('L', null)
					this.Cookies.set('M', null)
				} else {
					this.Cookies.set('L', response.result.auditState)
					this.Cookies.set('M', response.result.effectiveTime)
				}
				this.getUserInfo()
      }).catch(error => {
        this.Cookies.set('L', null)
				this.getUserInfo()
      })
    },
		checkLang() {
      let langType = this.$root.getStorage('lang')
      if(langType == 'en') {
        this.baseState = enBaseState
      } else {
        this.baseState = baseState
      }
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/css/style.scss';
.banner-panel {
	height: 330px;
	background: url(../../../assets/home/banner.jpg) 50% 0 no-repeat;
	.content-panel{
		margin: 0 auto;
		width: 1150px;
	}
	.login-panel {
		margin: 12px 0 0 0;
		padding: 0 10px 10px;
		width: 330px;
		background-color: #ffffff;
	}
	.login-title {
		margin: 15px 15px 10px 15px;
		text-align: left;
		font-size: 18px;
	}
	.login-error {
		margin: 10px 15px 5px 15px;
		text-align: left;
		font-size: 14px;
		color: $color-danger;
	}
	.login-form {
		padding: 0 15px;
		text-align: left;
		.el-form-item {
			margin-bottom: 20px;
		}
		.no-bottom {
			margin-bottom: 10px;
		}
		.control {
			margin-bottom: 10px;
		}
		.login-btn {
			width: 300px;
		}
	}
	.to-forgot {
		color: $color-blue;
		text-decoration: none;
	}

  .has-login {
    margin-top: 46px;
  }
  .login-account {
    margin: 50px auto;
  }
  .portal-btn,
  .change-btn {
    display: block;
    margin: 0 auto;
    width: 70%;
  }
  .change-btn {
    margin: 10px auto 30px;
  }
	.form-captcha {
    .el-input{
      display: inline-block;
      width: 50%;
    }
    img {
      height: 40px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>
